<template>
  <div :style="{ marginLeft: `${level * 20}px` }" class="comment-item">
    <div class="comment-content">
      <p>{{ comment.userName }}: {{ comment.commentContent }}</p>
<!--      <small>level: {{ level }}</small>-->
    </div>
    <div v-if="comment.childComments && comment.childComments.length > 0">
      <CommentItem
        v-for="child in comment.childComments"
        :key="child.id"
        :comment="child"
        :level="level + 1"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  comment: {
    type: Object,
    required: true,
  },
  level: {
    type: Number,
    default: 0,
  },
});
</script>

<style scoped>
.comment-item {
  border-left: 1px solid #ccc;
  padding-left: 10px;
  margin-top: 10px;
}
.comment-content {
  margin-bottom: 10px;
}
</style>
